<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>ANIME搭配SVG实现简约酷炫的登录界面</title>
    <link rel="stylesheet" href="index.css" />

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>

  <body>
    <div class="container">
      <div class="left">
        <h1>login</h1>
        <p>欢迎光临, 请输入您的账号和密码进行登录!</p>
      </div>
      <div class="right">
        <!-- SVG提前准备好, 来自互联网 -->
        <svg viewBox="0 0 320 300">
          <defs>
            <!-- 定义线性渐变 -->
            <linearGradient
              inkscape:collect="always"
              id="linearGradient1"
              x1="13"
              y1="193.49992"
              x2="307"
              y2="193.49992"
              gradientUnits="userSpaceOnUse"
            >
              <stop style="stop-color: #0ff" offset="0" />
              <stop style="stop-color: #f0f" offset="1" />
            </linearGradient>
          </defs>
          <path
            d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143"
          />
        </svg>
        <div class="form">
          <label for="account">账号</label>
          <input type="text" id="account" autocomplete="off" />
          <label for="password">密码</label>
          <input type="password" id="password" />
          <button id="submit">登录</button>
        </div>
      </div>
    </div>
    <!-- anime是一个轻量的JavaScript动画库,拥有简单而强大的API,可对CSS属性,SVG,DOM和JavaScript对象进行动画 -->
    <!-- 官网 https://www.animejs.cn/ -->
    <!-- 大家可以自己上官网下载,也可以私信找我拿 -->
    <script src="../../libs/anime.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>
